<template>
	<view class="projectDetail" v-cloak>
		<u-toast ref="uToast"></u-toast>
		<shopCarShow :showPop="showBottom" @refuse="refuse" @submit="useCard" :title='bottomTip' ref="shopCarShow"
			:listData="listData" @upDateCheck="upDateCheck" @upDateList="getMoreList" :cardId="shopCardId">
		</shopCarShow>
		<productDetailsCard :showPop="showproCard" @refuse="refuse1" @submit="subNearCar1" :title='bottomTip1'
			:proDetails='proDetails'>
		</productDetailsCard>
		<view class="current">
		</view>
		<view class="myTitle">
			<view class="returLeft" @click="returnLeft" style="z-index: 1000;">
				<u-icon name="arrow-left" class="" size="24" color="#fff"></u-icon>
			</view>
			<view class="titileCneter">
				商品详情
			</view>
		</view>
		<view class="shopContent" v-if="details">
			<view class="shopDetails">
				<view class="recommend f-column">
					<view class="topImg" @click="preImg">
						<image :src="details.is_trila == '0'?details.door_image:'../../static/images/index/fgLogo.png'"
							mode="aspectFill"></image>
					</view>
					<view class="list f-column">
						<view class="list_item" :style="{background:'#fff',zIndex:1}">
							<view class="content">
								<view class="item">
									<view class="entityList">
										<view class="num _border shopTitle">
											<view>{{details.name||''}}</view>
											<image src="../../static/images/near/qyLogo.png" mode="heightFix"
												style="height: 26rpx;" v-if="details.equity">
										</view>
										<view class="name">
											<view>营业时间：{{details.start_time||''}}-{{details.end_time||''}}
												<text class="tag" :class="{gray: details.openswitch==2}">{{details.openswitch==1?'营业中':'已关闭'}}</text>
											</view>
											<view class="right" style="display: flex;align-items: center;">
												<image src="../../static/icon/my/tel.png" mode="" class="image1"
													@click.stop="$tel(details.mobile)" v-if="details.mobile">
												</image>
												<view class="" @click.stop="getOpenMap(details)">
													<image src="../../static/icon/my/goIcon2.png" mode="" class="image">
													</image>
													<text>导航</text>
												</view>
											</view>
										</view>
										<view class="name mt-1" v-if="false">
											<text>{{details.refer||''}}</text>
											<view class="right">
											</view>
										</view>
									</view>
								</view>
								<view class="item">
									<view class="entityList">
										<view class="name">
											<text class="address">{{details.address||''}}</text>
											<text
												style="width: 150rpx;text-align: right;">{{details.distance||''}}km</text>
										</view>
									</view>
								</view>
								<view class="item">
									<view class="entityList">
										<view class="name" v-if="details.card_type">
											<text class="address">支持类型：<text class="tag" v-for="(tag, index) in details.card_type.split(',')">{{tag}}</text></text>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="cardsDetails">
				<view class="list_item">
					<view class="title">
						<text>本店商品/服务</text>
						<text class="seeMore" @click="seeMore">查看更多>></text>
					</view>
					<view class="listType" @click="showCard1(item)" v-for="(item,index) in details.goods" :key="index">
						<view class="left_type">
							<view class="down">
								<view class="">
									优惠价
								</view>
								<view class="">

								</view>
							</view>
							<view class="type_name">
								<view class="newName">
									<view class="newName_left">
										{{item.name}}
									</view>
									<view class="x-r newPric">
										<view class="down_price">
											<view class="costPrice">
												省{{item.economize}}元
											</view>
											<view class="">
												¥{{item.actual_payment}}
											</view>
										</view>
										<view class="price">
											原价¥{{item.price}}
										</view>
									</view>
								</view>

							</view>
						</view>
					</view>
				</view>
				<view class="list_item cards_item" @click="goCards">
					<image src="../../static/images/near/goCard.png" mode="widthFix" class="goCard">
					</image>
				</view>
				<view class="list_item">
					<view class="title">
						请选择你的卡券
					</view>
					<view class="selectCard jc-sb" @click="showCard">
						<view class="">
							请选择你的卡券
						</view>
						<view class="">
							<u-icon name="arrow-down-fill" color="#2CB9A4" size="18"></u-icon>
						</view>
					</view>
				</view>
				<view class="botItem">
					<view class="left">
						注意：
					</view>
					<view class="right">
						卡券分为平台券与商家券，平台券可在所有商家使用， 商家券仅能在购买店铺使用,可在查看更多中查看所有商券！
					</view>
				</view>
				<view class="f-row goNear" @click.stop="getOpenMap(details)">
					<image src="../../static/images/index/btnBg.png" mode="widthFix"
						style="width: 20rpx;height: 20rpx;margin-right: 10rpx;"></image>
					<view class="">
						前往洗车
					</view>
				</view>
			</view>
		</view>
		<view v-if="!details" style="padding: 20rpx;box-sizing: border-box;margin-top: 200rpx;" :animate="true">
			<u-skeleton rows="20" title loading></u-skeleton>
		</view>
	</view>


	</view>
</template>

<script>
	import shopCarShow from "@/components/index/shopCarShow.vue"
	import productDetailsCard from "@/components/index/productDetailsCard.vue"
	import {
		merchantSee,
		goodsDetails,
		usableCoupons
	} from '@/request/api.js'
	export default {
		props: {
			item: {
				type: String,
				default: ''
			}
		},
		components: {
			shopCarShow,
			productDetailsCard
		},
		onLoad(res) {
			this.form.id = res.id;
			this.$forceUpdate()
			this.getAuthorizeInfo()

		},
		data() {
			return {
				shopCardId: '',
				showproCard: false,
				showBottom: false,
				last_page: 1,
				bottomTip: '请选择你的卡券',
				bottomTip1: '商品详情',
				projectList: [],
				form: {
					id: '',
					lon: '',
					type: 1,
					lat: '',
				},
				details: null,
				proDetails: null,
				listData: []
			}
		},
		created() {

		},
		onShow() {
			// this.typeList()
			this.showBottom = false
		},
		methods: {
			preImg() {
				const defaultImg = require('../../static/images/index/fgLogo.png')
				let img = this.details.is_trila == '0'?this.details.door_image:defaultImg
			uni.previewImage({
				urls: [img],
				current: 0
			})
		},
		goCards() {
			uni.navigateTo({
				url: '/my_pages/cardLIst/cardLIst'
			})
		},
		openAuthSetting() {
			let that = this;
			uni.getSetting({
				success: (res) => {
					console.log(res, JSON.stringify(res, "getSetting"));
					if (
						res.authSetting["scope.userLocation"] != undefined &&
						res.authSetting["scope.userLocation"] != true
					) {
						uni.showModal({
							title: "请求授权当前位置",
							content: "需要获取您的地理位置，请确认授权",
							success: function(res) {
								if (res.cancel) {
									uni.showToast({
										title: "拒绝授权",
										icon: "none"
									});
								} else if (res.confirm) {
									uni.openSetting({
										success: function(dataAu) {
											console.log(dataAu, "openSetting");
											if (dataAu.authSetting[
													"scope.userLocation"] ==
												true) {
												uni.showToast({
													title: "授权成功",
													icon: "none"
												});
												//再次授权，调用wx.getLocation的API
												that.getAuthorizeInfo();
											} else {
												uni.showToast({
													title: "授权失败",
													icon: "none"
												});
											}
										},
									});
								}
							},
						});
					} else if (res.authSetting["scope.userLocation"] == undefined) {
						//调用wx.getLocation的API
						console.log("首次授权");
						this.getAuthorizeInfo();
					} else {
						//调用wx.getLocation的API
						this.getAuthorizeInfo();
					}
				},
			})
		},
		// 位置授权
		getAuthorizeInfo() {
			let self = this
			// console.log(111)
			uni.authorize({
				scope: 'scope.userLocation',
				success() { // 允许授权
					uni.getLocation({
						success: function(res) {
							console.log("经纬度1", res);
							self.form.lon = res.longitude
							self.form.lat = res.latitude
							self.getDetails()
						},
					})
				},
				fail() { // 拒绝授权
					self.getDetails()
					self.openAuthSetting()
					console.log("你拒绝了授权，无法获得周边信息")
				}
			})
		},
		getMoreList() {
			if (this.form.page < this.last_page) {
				this.form.page = this.form.page + 1
				this.getCouponsList()
			}
		},
		upDateCheck(e) {
			console.log(e, 'update')
			this.listData = e
		},
		useCard(i) {
			let data = {
				id: i.id,
				// type:this.form.type_data,//当为卡卷的时候类型可不传
				score: 2,
				log:i.log
			}
			uni.navigateTo({
				url: '/pages/index/showCode/showCode?form=' + JSON.stringify(data)
			})
		},
		async getCouponsList() {
			 this.listData = []
			let res = await usableCoupons({
				id: this.form.id
			})
			this.listData = this.listData.concat(res.data.data)
			this.last_page = res.data.last_page
			this.showBottom = true;
		},
		seeMore() {
			uni.navigateTo({
				url: '/pages/index/moreProducts?id=' + this.form.id
			})
		},
		async getDetails() {
			let res = await merchantSee(this.form)
			this.details = res.data
			console.log(res, 'details')
		},
		returnLeft() {
			uni.navigateBack()
		},
		async showCard1(e) {
			let id = e.id
			let res = await goodsDetails({
				id
			})
			this.proDetails = res.data
			console.log(res, '商品详情')
			this.showproCard = true;
		},
		refuse1() {
			this.showproCard = false
		},
		showCard() {
			this.listData = []
			this.shopCardId = this.form.id
			this.getCouponsList()

		},
		refuse() {
			this.showBottom = false
		}
	}
	}
</script>
<style>
	page {
		background: #f5f5f5;
	}

	radio-group text {
		font-size: 40rpx;
	}



	radio .wx-radio-input {
		border-radius: 50%;
		/* 圆角 */
		width: 40rpx;
		border: 1rpx solid #ccc;
		height: 40rpx;
	}

	radio .wx-radio-input.wx-radio-input-checked {
		border: none;
		background: #2CB9A4;
	}

	radio .wx-radio-input.wx-radio-input-checked::before {
		border-radius: 50%;
		width: 40rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		font-size: 40rpx;
		color: #fff;
		background: #2CB9A4;
		/* transform: translate(-50%, -50%) scale(1); */
	}
</style>
<style lang="scss" scoped>
	.f-row {
		display: flex;
		align-items: flex-end;
	}

	.goNear {
		background: #2CB9A4;
		color: #fff;
		height: 60rpx;
		justify-content: center;
		align-items: center;
		border-radius: 20px;
		padding: 10rpx 20rpx;
		font-size: 32rpx;
		align-items: center;
	}

	[v-cloak] {
		display: none !important;
	}

	::v-deep .u-swiper {
		width: 100% !important;
	}

	._border {
		border-bottom: 0.5px solid rgba(217, 217, 217, 0.3);
	}

	.topImg {
		position: absolute;
		right: 36rpx;
		top: -30rpx;
		z-index: 2;

		image {
			width: 130rpx;
			height: 122rpx;
			border-radius: 10rpx;
		}
	}

	.shopTitle {
		padding-bottom: 20rpx;
		color: #000000;
		font-weight: 600;
		margin-bottom: 20rpx;
		font-size: 32rpx;
	}

	.shopContent {
		margin-top: 200rpx;

		.shopDetails {
			position: relative;

			.recommend {
				padding: 0 20rpx;
				margin-top: 40rpx;

				.title {
					font-size: 30rpx;
					line-height: 20px;
					color: #222222;
					font-weight: 600;
				}

				.list {
					margin-top: 20rpx;

					.content {
						background-color: #fff;
						border-radius: 10px;

						.conBot {
							align-items: flex-end;

							.f-row {
								display: flex;
								align-items: flex-end;
							}

							.goNear {
								background: #2CB9A4;
								color: #fff;
								height: 60rpx;
								justify-content: center;
								align-items: center;
								border-radius: 10rpx;
								padding: 10rpx 20rpx;
								font-size: 32rpx;
								align-items: center;
							}

							display: flex;
							justify-content: space-between;
							color: #2CB9A4;

							.down {
								background: #C0EAE4;
								justify-content: center;
								display: flex;
								flex-direction: column;
								align-items: center;
								padding: 10rpx;
								font-size: 22rpx;
								border-radius: 10rpx;
								margin-right: 10rpx;
							}

							.down_price {
								margin-right: 40rpx;
							}

							.price {
								margin-right: 10rpx;
								font-size: 26rpx;

							}
						}
					}

					.list_item {
						display: flex;
						flex-direction: column;
						background: #2CB9A4;
						border-radius: 20rpx;

						.title {
							color: #fff;
							font-size: 30rpx;
							font-weight: 600;
						}

						.item {
							display: flex;
							color: #505050;
							margin: 15rpx 0;

							padding-bottom: 15rpx;
							box-sizing: border-box;
							background: #fff;
							border-radius: 20rpx;

							.icon {
								width: 72rpx;
								height: 72rpx;
								width: 100rpx;
								height: 100rpx;

								.image {
									width: 100%;
									height: 100%;
								}
							}

							.entityList {
								flex: 1;
								display: flex;
								flex-direction: column;
								overflow: hidden;
								text-overflow: ellipsis;
								justify-content: space-between;

								.name {
									display: flex;
									justify-content: space-between;
									margin-left: 15rpx;
									white-space: nowrap;
									overflow: hidden;
									text-overflow: ellipsis;
									color: #BABABA;
									font-size: 26rpx;
									padding-right: 20rpx;

									.image {
										width: 26rpx;
										height: 26rpx;
										margin-right: 10rpx;
										vertical-align: middle;
									}

									.image1 {
										width: 50rpx;
										height: 50rpx;
										margin-right: 25rpx;
										vertical-align: middle;
									}

									.address {
										white-space: pre-wrap;
									}
								}

								.num {
									margin-left: 15rpx;
									margin-top: 10rpx;
									white-space: nowrap;
									overflow: hidden;
									text-overflow: ellipsis;
								}
							}
						}
					}

				}
			}
		}

		.cardsDetails {
			margin: 20rpx;
			background: #fff;
			border-radius: 20rpx;
			padding: 20rpx;
			display: flex;
			flex-direction: column;
			padding-bottom: 30rpx;

			.list_item {
				margin-left: 15rpx;

				.selectCard {
					display: flex;
					justify-content: space-between;
					background: rgba(192, 234, 228, 0.2);
					border: 0.5px solid #2CB9A4;
					border-radius: 5px;
					padding: 14rpx;
					color: #2CB9A4;
					font-size: 28rpx;
				}
			}

			.cards_item {
				margin-right: 0;
				padding: 0rpx;
				margin-top: 20rpx;

				.goCard {
					width: 100%;
				}
			}

			.botItem {
				display: flex;
				padding: 20rpx;

				.left {
					font-size: 26rpx;
					color: #2CB9A4;
				}

				.right {
					flex: 1;
					font-size: 26rpx;
					color: #081738;

				}
			}

			.title {
				color: #000000;
				font-weight: 600;
				margin-bottom: 20rpx;
				margin-top: 20rpx;
				font-size: 32rpx;
				display: flex;
				justify-content: space-between;

				.seeMore {
					color: #BABABA;
					font-size: 28rpx;
					font-weight: 500;
				}
			}

			.listType {
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: #2CB9A4;
				padding-bottom: 20rpx;
				border-bottom: 0.5px solid rgba(217, 217, 217, 0.3);
				margin-top: 20rpx;

				.left_type {
					display: flex;
					align-items: center;
					width: 100%;
					.type_name {
						color: #000;
						font-size: 30rpx;
						font-weight: 600;
						flex: 1;

						.newName {
							display: flex;
							align-items: center;

							.newName_left {
							}

							.newPric {
								align-items: flex-end;
								flex: 1;
								display: flex;
								flex-direction: column;

								.costPrice {
									background: rgba(255, 102, 102, 0.2);
									font-size: 22rpx;
									font-weight: 300;
									display: flex;
									justify-content: center;
									align-items: center;
									padding: 4rpx 10rpx;
									margin-right: 10rpx;
									border-radius: 4rpx;
								}
							}
						}
					}
				}

				.down {
					color: #FF6666;
					justify-content: center;
					display: flex;
					flex-direction: column;
					align-items: center;
					padding: 6rpx 10rpx;
					font-size: 22rpx;
					border-radius: 10rpx;
					margin-right: 10rpx;
					background: rgba(255, 102, 102, 0.2);
					width: 70rpx;
				}

				.x-r {
				}

				.down_price {

					margin-right: 10rpx;
					font-size: 28rpx;
					color: #FF6666;
					display: flex;
				}

				.price {
					margin-right: 10rpx;
					font-size: 24rpx;
					text-decoration-line: line-through;
					color: #BABABA;
					font-weight: 400;
					margin-top: 14rpx;
				}
			}
		}
	}

	.projectDetail {
		position: relative;
		overflow: hidden;
	}

	::v-deep .u-textarea {
	}

	.alterPro {
		position: fixed;
		width: 100%;
		bottom: 0px;
		z-index: 0;
		left: 0;
		background: #fff;
		justify-content: center;
		align-items: center;
		height: 60px;
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
		display: flex;
	}

	.scrollHight {
		top: 100px;
		position: absolute;
		overflow: scroll;
	}

	.upload {
		padding: 20rpx;
		margin: 20px 20rpx 50px 0;
		background: #fff;
		z-index: 110;
	}

	.current {
		background: url(../../static/images/index/shopBg.png);
		background-size: 100% 100%;
		height: 232px;
		background-repeat: no-repeat;
		position: fixed;
		top: 0;
		overflow: hidden;
		left: 0;
		width: 100%;
		z-index: -1;
	}

	.current1 {
		background: linear-gradient(to bottom, rgba(21, 125, 250, 0), #c1e0fdbf);
		background-size: 100% 100%;
		height: 232px;
		background-repeat: no-repeat;
		position: fixed;
		bottom: 0;
		overflow: hidden;
		left: 0;
		width: 100%;
		z-index: 0;
	}

	.top {
		width: 100%;
		top: 65px;
		position: fixed;
		z-index: 9999;
	}

	.navTitle {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #979797;
		padding: 20rpx 0;
	}

	.navItem {
		width: 33.33%;
		text-align: center;
	}

	.myTitle {
		position: fixed;
		z-index: 1;

		.returLeft {
			top: 70rpx;
			left: 15rpx;
			position: fixed;
		}

		.titileCneter {
			top: 70rpx;
			left: 50%;
			transform: translate(-50%);
			position: fixed;
			color: #fff;
			z-index: 110;
		}
	}

	.project {
		position: relative;
		margin-top: 150rpx;
	}

	.showView {
	}

	.my_view {
		margin-top: 119px;
		overflow-y: scroll;
		position: inherit;
		background: #fff;
		height: calc(100vh - 170px);
		padding-bottom: 100px;
		z-index: 999999999999999999;
	}
	.tag {
		background-color: #2cb9a4;
		padding: 4rpx 10rpx;
		border-radius: 4rpx;
		color: #fff;
		display: inline-block;
		margin-left: 6rpx;
		margin-top: 4rpx;
	}
	.gray {
		background-color: #ccc;
	}
</style>